<template>
  <div>
    <a-card :bordered="true" style="margin-top: 24px" title="组件示例">
      <a-list size="large">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <a-avatar :src="item.avatar" shape="square" size="large" slot="avatar"/>
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>
          <div class="list-content">
            <div class="list-content-item">
              <a-progress
                :percent="item.progress.value"
                :status="!item.progress.status ? null : item.progress.status"
                style="width: 180px"/>
            </div>
          </div>
          <div slot="actions">
            <a @click="toPage(item)" href="javascript:">查看</a>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>

const data = []
data.push({
  title: '输入框',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  description: '普通输入框，格式输入框',
  progress: {
    value: 100
  },
  routeName: 'input_box_index'
})
data.push({
  title: '选择框',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  description: '单选，多选，时间选择，时间段选择，高级选择框，可查询单选',
  progress: {
    value: 100
  },
  routeName: 'select_box_index'
})
data.push({
  title: '上传',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  description: '文件上传，图片上传',
  progress: {
    value: 100
  },
  routeName: 'upload_box_index'
})
data.push({
  title: '表格',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  description: '一般表格，s-table，可编辑表格',
  progress: {
    value: 60
  },
  routeName: 'table_index'
})
data.push({
  title: '表单',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '普通表单，高级表单',
  progress: {
    value: 50
  },
  routeName: 'form_index'
})
data.push({
  title: '排列样式',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '搜索条件，表格，详情展示，树目录表格，部门展示',
  progress: {
    value: 75
  },
  routeName: 'style_index'
})
data.push({
  title: '表单设计器',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '可视化进行拖拽生成表单',
  progress: {
    value: 75
  },
  routeName: 'formDesign'
})
data.push({
  title: '选择',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '高级选择框，自定义选择条件',
  progress: {
    value: 75
  },
  routeName: 'select_table_index'
})
export default {
  name: 'Analysis',
  data () {
    return {
      data,
      status: 'all'
    }
  },
  methods: {
    toPage (data) {
      this.$router.push({ name: data.routeName })
    }
  }
}
</script>

<style lang="less" scoped>
	.ant-avatar-lg {
		width: 48px;
		height: 48px;
		line-height: 48px;
	}

	.list-content-item {
		color: rgba(0, 0, 0, .45);
		display: inline-block;
		vertical-align: middle;
		font-size: 14px;
		margin-left: 40px;

		span {
			line-height: 20px;
		}

		p {
			margin-top: 4px;
			margin-bottom: 0;
			line-height: 22px;
		}
	}
</style>
